<template>
  <div class="container">
    <div class="header">
      <div class="search">
        <el-input auto-complete="off" class="p-frame" placeholder="请输入编号或名称" type="text" v-model="name" />
      </div>
      <el-button type="primary" @click="findPage">查询</el-button>
      <el-button type="primary" @click="add">新增</el-button>
    </div>
    <div class="content">
      <div class="tableWrapper">
        <el-table border stripe :data="tableData" tooltip-effect="dark">
          <el-table-column align="center" label="名称" prop="name" show-overflow-tooltip />
          <el-table-column align="center" label="IP地址" prop="ip" show-overflow-tooltip />
          <el-table-column align="center" label="端口" prop="port" show-overflow-tooltip />
          <el-table-column align="center" label="流地址" prop="address" show-overflow-tooltip />
          <el-table-column align="center" label="设备序列号" prop="deviceSerial" show-overflow-tooltip />
          <el-table-column align="center" label="通道号" prop="channel" show-overflow-tooltip />
          <el-table-column align="center" label="排序编号" prop="sortNo" show-overflow-tooltip />
          <el-table-column align="center" label="操作" width="200">
            <template slot-scope="scope">
              <span class="pointer" @click="edit(scope.row)">修改</span>
              <i class="line"></i>
              <span class="pointer" @click="remove(scope.row)">删除</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="footer">
      <div class="paging info">
        <el-pagination :page-sizes="[10]" :page-size="this.pageSize" :current-page="pageIndex"
                       :total="totalCount" @current-change="pager" background
                       layout="total, sizes, prev, pager, next" />
      </div>
    </div>
    <el-dialog :visible.sync="videoVisible" :title="formTitle" :before-close="cancel" :close-on-click-modal="false">
      <el-form :model="videoForm" :rules="rules" ref="videoForm" label-width="100px" class="demo-ruleForm">
        <el-row>
          <el-col :span="12">
            <el-form-item label="视频名称" prop="name">
              <el-input v-model="videoForm.name" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="流地址" prop="address">
              <el-input v-model="videoForm.address" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="IP" prop="ip">
              <el-input v-model="videoForm.ip" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="端口" prop="port">
              <el-input-number v-model="videoForm.port" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="设备序列号" prop="deviceSerial">
              <el-input v-model="videoForm.deviceSerial" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="通道" prop="channel">
              <el-input v-model="videoForm.channel" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="账号" prop="loginName">
              <el-input v-model="videoForm.loginName" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="密码" prop="password">
              <el-input v-model="videoForm.password" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="经度">
              <!-- <el-input v-model="videoForm.lon" /> -->
              <LonLat ref="lonRef" @child-event="lonEvent"  v-if ="isReady" :msg-val="chilLon"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="纬度">
              <LonLat ref="latRef" @child-event="latEvent"  v-if ="isReady"  :msg-val="chilLat"/>
              <!-- <el-input v-model="videoForm.lat" /> -->
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="排序编号" prop="sortNo">
              <el-input-number v-model="videoForm.sortNo" :min="1"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="备注">
          <el-input type="textarea" v-model="videoForm.remark" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button v-if="formEdit === 'edit'" type="primary" @click="updateVideo" class="dialog-btn">修 改</el-button>
        <el-button v-else type="primary" @click="addVideo" class="dialog-btn">保 存</el-button>
        <el-button type="primary" @click="cancel" class="dialog-btn">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {VideoDataModelApi} from '../../../../api/Intelligence/video/videoDataModelApi'
import LonLat from '../../../../components/LatLon'

let videoDataModelApi = new VideoDataModelApi()
export default {
  name: 'videoData',
  components: {
    LonLat
  },
  data () {
    return {
      name: null,
      pageIndex: 1,
      pageSize: 10,
      totalCount: 0,
      tableData: [],
      formTitle: null,
      formEdit: null,
      videoForm: {
        name: '',
        sortNo: 1, // 排序号
        ip: '',
        address: '', // 流地址
        loginName: '', // 账号
        password: '', // 密码
        lon: '', // 经度
        lat: '', // 纬度
        port: 0, // 端口
        channel: '', // 通道号
        remark: '' // 备注
      },
      videoVisible: false,
      rules: {
        name: [
          { required: true, message: '请输入视频名称', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
        ],
        address: [
          { required: true, message: '请填写流地址', trigger: 'blur' }
        ],
        port: [
          { required: true, message: '请填写端口号', trigger: 'blur' }
        ],
        deviceSerial: [
          { required: true, message: '请填写设备序列号', trigger: 'blur' }
        ],
        channel: [
          { required: true, message: '请填写通道号', trigger: 'blur' }
        ]
      },
      chilLon:'',
      chilLat:'',
      isReady:false
    }
  },
  created () {
    this.findPage()
  },
  methods: {

     //经度
    lonEvent(val){
      this.videoForm.lon = val;
    },

    latEvent(val){
      this.videoForm.lat = val;
    },
    findPage () {
      let params = {
        'name': this.name,
        'pageIndex': this.pageIndex,
        'pageSize': this.pageSize,
        'sort': 'sortNo',
        'order': 'ASC'
      }
      videoDataModelApi.findPageVideo(params).then(res => {
        let result = res.data.result
        if (res.data.message === 'success' && result) {
          this.tableData = result.rows
          this.totalCount = result.totalCount
        } else {
          this.tableData = []
          this.totalCount = 0
        }
      })
    },
    pager (val) {
      this.pageIndex = val
      this.findPage()
    },
    add () {
      this.formEdit = 'add'
      this.formTitle = '新增监控视频'
      this.videoVisible = true
      this.isReady = true
    },
    edit (row) {
      this.formEdit = 'edit'
      this.formTitle = '修改监控视频'
      this.videoVisible = true
      videoDataModelApi.getVideoInfo(row.id).then(res => {
        if (res.data.message === 'success') {
          this.videoForm = res.data.result
          this.chilLon = this.videoForm.lon;
          this.chilLat = this.videoForm.lat;
          this.isReady = true
        }
      })
    },
    addVideo () {
      this.$refs['videoForm'].validate((valid) => {
        if (valid) {
          videoDataModelApi.addVideo(this.videoForm).then(res => {
            if (res.data.message === 'success') {
              this.findPage()
              this.cancel()
              this.$message({
                message: '新增成功',
                type: 'success'
              })
            } else {
              this.$message.error('新增失败')
            }
          })
        } else {
          return false
        }
      })
    },
    updateVideo () {
      this.$refs['videoForm'].validate((valid) => {
        if (valid) {
          videoDataModelApi.upDataViode(this.videoForm).then(res => {
            if (res.data.message === 'success') {
              this.findPage()
              this.cancel()
              this.$message({
                message: '修改成功',
                type: 'success'
              })
            } else {
              this.$message.error('修改失败')
            }
          })
        } else {
          return false
        }
      })
    },
    remove (row) {
      let tips = ''
      if (row) {
        tips = `此操作将删除: ${row.name}, 是否继续?`
      } else {
        return
      }
      this.$confirm(tips, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        videoDataModelApi.deleteVideo(row.id).then((res) => {
          if (res.data.message === 'success') {
            this.findPage()
            this.$message({
              message: '删除成功',
              type: 'success'
            })
          } else {
            this.$message.error('删除失败')
          }
        })
      }).catch((error) => {
        console.log(error)
      })
    },
    cancel () {
      this.videoForm = {
        name: '',
        sortNo: 1, // 排序号
        ip: '',
        address: '', // 流地址
        loginName: '', // 账号
        password: '', // 密码
        lon: '', // 经度
        lat: '', // 纬度
        port: 0, // 端口
        channel: '', // 通道号
        remark: '' // 备注
      }
      this.videoVisible = false
      this.isReady = false;
      this.$refs.lonRef.initData();
      this.$refs.latRef.initData();
    }
  }
}
</script>

<style lang="less" scoped>
  .container {
    height: 100%;
    padding: 0 2%;
  }
  .el-inputs{
    background-color: #32f1ff16;
    border: 1px solid #FFF;border-radius: 4px;
  }
  .header {
    height: 45px;
    display: flex;
    flex-direction: row;
    margin: 30px 0 20px 0;
    .handle {
      width: 80px;
      margin-left: 5px;
      margin-right: 50px;
    }
    .btn {
      width: 80px;
      cursor: pointer;
      border: none;
      padding: 10px;
      font-size: 16px;
      font-weight: 400;
      color: #ffffff;
      background: rgba(14, 107, 183, 0.9);
      margin-left: 35px;
      border-right: 0;
    }
    .search {
      width: 350px;
      height: 45px;
      font-size: 22px;
      font-weight: 400;
      color: rgba(255, 255, 255, 1);
      /*border: 1px solid #0E6BB7;*/
      .p-frame {
        -webkit-appearance: none;
        background-color: transparent;
        background-image: none;
        border-radius: 0;
        color: #FFF;
      }
      & /deep/ .el-input__inner  {
        color: #FFFFFF;
        font-size: 1.5rem;
        height: 45px;
        background-color: transparent;
        border: 1px solid #0E6BB7;
        outline: 0;
        border-radius: 0;
      }
    }
  }
  .footer {
    margin-top: 40px;
    color: #ffffff;
    font-size: 16px;

    .info {
      .select {
        width: 52px;
        height: 35px;
      }

      .select /deep/ .el-input__inner {
        padding-left: 5px;
        padding-right: 0;
      }

      .select /deep/ .el-input__icon {
        width: 15px;
      }

      .select /deep/ .el-select__caret.is-reverse {
      }
    }

    .paging {
      text-align: right;
      padding-right: 30px;
      margin-top: -20px;

      & /deep/ .el-pagination.is-background .btn-prev {
        background: none;
        border: 1px solid rgba(0, 255, 255, 1);
      }

      & /deep/ .el-pagination.is-background .btn-next {
        background: none;
        border: 1px solid rgba(0, 255, 255, 1);
      }

      & /deep/ .el-pager li {
        background: none;
        border: 1px solid rgba(0, 255, 255, 1);
      }

      & /deep/ .el-pagination__total,
      & /deep/ .el-pagination__sizes {
        float: left;
        font-size: 1.6rem;
        height: 35px;
        line-height: 35px;
      }

      & /deep/ .el-input__inner {
        height: 35px;
      }

      & /deep/ .el-input .el-input__inner {
        padding-right: 20px;
        color: #ffffff;
        font-size: 1.6rem;
      }
    }
  }
</style>
